<template>
  <a-tabs :active-key="key" @tab-click="handleClick">
    <a-tab-pane v-for="(item, index) in list" :key="item" :title="item">
      <div class="arco-card-body">
        <a-space
          direction="vertical"
          :style="{ width: '100%', padding: '0 20px' }"
        >
          <slot :name="item" />
          <a-form-item>
            <a-space :size="16">
              <a-button v-if="index > 0" @click="prevent(index)">
                <icon-left />
                上一步
              </a-button>
              <a-button
                v-if="index < list.length - 1"
                type="primary"
                @click="next(index)"
              >
                下一步
                <icon-right />
              </a-button>
              <slot name="submit" v-if="index === list.length - 1" />
            </a-space>
          </a-form-item>
        </a-space>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive, computed, watch } from 'vue';

  const emits = defineEmits(['update:index']);
  const props = defineProps({
    list: {
      type: String,
      default: ``,
    },
    index: {
      type: String,
      default: ``,
    },
  });
  const prevent = (index) => {
    console.error(index);
    emits('update:index', list.value[index - 1]);
  };
  const next = (index) => {
    console.error(index);

    emits('update:index', list.value[index + 1]);
  };

  const list = ref(props.list ? props.list.split(',') : []);
  const key = ref(props.index);
  watch(
    () => props.index,
    (index) => {
      key.value = index;
    }
  );
  const handleClick = (index) => {
    emits('update:index', index);
  };
</script>

<style lang="scss" scoped></style>
